<template>
	<view class="content">
		<view class="vide_div">
			<video id="myVideo" :src="src" @error="videoErrorCallback" controls></video>
		</view>

		<view class="position-group">

			<!-- 一级循环 -->
			<view class="pronames_one" v-for="(item,index) in positionlist" :key="index"
				:class="item.oneliststare?'oneshow':'onehide'">
				<view class="pronames-one-label" @click="onelist(index)">
					<text>{{item.chapterName}}</text>
					<text :class="item.twoFold?'cuIcon-fold':'cuIcon-unfold'"></text>
				</view>
				<!-- 二级循环 -->
				<view class="pronames_two" v-for="(item2,index2) in item.mlist" :key="index2"
					:class="item2.listStart?'twoshow':'twohide'">
					<view class="pronames-two-label" @click="twolist(index,index2)">
						<view class="left_div">
							<view>{{item2.videoName}}</view>
							<view>时长:{{item2.duration}} | 开始学习</view>
						</view>
						<image
							:src="item2.listStart?'../../static/course_icon_last_play.png':'../../static/btn_course_item_icon_play_red.png'">
						</image>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.pId =option.id;
			this.type=option.type;//1 是课程视频 2是讲解视频
		},
		data() {
			return {
				pId:'',//所属讲解Id
				type:'',//1 是课程视频 2是讲解视频
				src: '',
				positionSele: true,
				positionlist: [/* {
					id: 0,
					onename: "销售|客服|市场",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "销售业务",
						twoliststare: false,
						dur: "00:22:50",
						url: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					}, {
						twoid: 1,
						twoname: "销售管理",
						dur: "00:20:30",
						twoliststare: false,
						url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
					}]
				}, {
					id: 1,
					onename: "IT|互联网|通信",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "软件/互联网开发/系统集成",
						twoliststare: false,
						dur: "00:27:50",
						url: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					}, {
						twoid: 1,
						twoname: "互联网产品/运营管理",
						twoliststare: false,
						dur: "00:29:50",
						url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
					}]
				} */]

			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
			if(this.type==1){
				//获取视频详情
				this.getcourseDetail();
			}else if(this.type==2){
				//获取讲解详情
				this.getVideoDetail();
			}
		},
		methods: {
			getcourseDetail:function(){
				uni.request({
					url:this.baseUrl+'getChapterVideo',
					method:'GET',
					data:{
						'cid':this.pId
					},
					success: (res) => {
						
						this.positionlist=res.data.data;
						this.src=this.positionlist[0].mlist[0].url;
						this.positionlist[0].oneliststare=true;
					}
				})
			},
			getVideoDetail:function(){
				uni.request({
					url:this.baseUrl+'getExplainChapterVideo',
					method:'GET',
					data:{
						'cid':this.pId
					},
					success: (res) => {
						
						this.positionlist=res.data.data;
						this.src=this.positionlist[0].mlist[0].url;
						this.positionlist[0].oneliststare=true;
					}
				})
			},
			videoErrorCallback: function(e) {
				/* uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				}) */
			},
			onelist(index) {
				let positionlist = this.positionlist;
				// 展开收起一级列表 start
				if (positionlist[index]['oneliststare'] == false) {
					positionlist[index]['oneliststare'] = true;
				} else {
					positionlist[index]['oneliststare'] = false;
				}
			},

			twolist(index, index2) {
				
				
				// 设置图标
				for (var i = 0; i < this.positionlist.length; i++) {					
					for (var x = 0; x < this.positionlist[i].mlist.length; x++) {
						
						if (index == i && index2 == x) {
							console.log(index+"--"+index2);
							this.positionlist[i].mlist[x].listStart= true;
							this.src =  this.positionlist[i].mlist[x].url;
						} else {
							 this.positionlist[i].mlist[x].listStart= false;
						}
					}
				}
			}


		}
	}
</script>

<style>
	.vide_div {}

	.vide_div video {
		width: 100%;
		height: 400rpx;
	}

	.position-group {
		width: 100%;
		height: auto;
	}


	/* 一级 */
	.pronames_one {
		width: 100%;
		height: auto;
	}

	.pronames-one-label {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 0px 3%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx #eaeaea solid;
	}

	.pronames-one-label text {
		font-size: 26rpx;
		color: #333333;
	}
	/* 二级 */
	.pronames_two {
		width: 100%;
		height: auto;
		transition: all 0.5s;
	}

	.pronames-two-label {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 3%;
		border-bottom: 1rpx #DADADA solid;
		font-size: 22rpx;
		color: #333333;
		align-items: center;
		background: #FFFFFF;
	}

	.pronames-two-label .left_div {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}

	.pronames-two-label .left_div view:nth-child(2) {
		font-size: 22rpx;
		color: #666666;
		margin-top: 10rpx;
	}

	.pronames-two-label image {
		width: 40rpx;
		height: 40rpx;
	}

	/* 展开收起效果 start */

	.oneshow {}

	.oneshow .pronames_two {
		display: block;
	}

	.onehide {}

	.onehide .pronames_two {
		display: none;
	}

	/* 展开收起效果 end */


	.twoshow {}

	.twoshow .pronames_three {
		display: block;
	}

	.twohide {}

	.twohide .pronames_three {
		display: none;
	}

	/* 列表展开和收起的图标 */
	.cuIcon-fold {
		background: url(../../static/ico_arrow_up.png);
		display: inline-block;
		height: 12rpx;
		width: 20rpx;
		background-size: 100%;
	}

	.cuIcon-unfold {
		background: url(../../static/ico_arrow_down.png);
		display: inline-block;
		height: 12rpx;
		width: 20rpx;
		background-size: 100%;
	}
</style>
